@charset "utf-8";

$fontsize:64px;
html{
    font-size: 64px;
}
@function r($px){
    @return $px/$fontsize*1rem;
}


.web_login_not{
    position: absolute;
    top: r(90px);
    bottom: r(95px);
    transform: translateY(-100%);
    transition: all .3s linear;
    width: 100%;
    background: #222;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling:touch;
    z-index: 200;
    .nav{
        width: r(611px);
        height: r(85px);
        margin: 0 auto;
        border-bottom: r(1px) solid #484848;
        padding-bottom: r(16px);
        position: relative;
        margin-bottom: r(65px);
    }
    .close_wrap{
        width: r(50px);
        height: r(50px);
        position: absolute;
        top: r(16px);
        left: 0;
        img{
            width: 100%;
        }
    }
    .login_content{
        width: r(130px);
        margin: 0 auto;
        text-align: center;
        margin-bottom: r(62px);
        .head_portrait_wrap{
            width: r(130px);
            margin-bottom: r(22px);
            img{
                width: 100%;
            }
        }
        .login_now{
            font-size: 14px;
            color: #fff;
            margin-bottom: r(10px);
        }
        .forget_pwd{
            font-size: 12px;
            color: #474747;
            position: relative;
            &::after{
                content: "";
                position: absolute;
                left: 15%;
                display: block;
                height: r(1px);
                transform-origin: center;
                background: #474747;
                width: 72%;
            }
        }
    }
    .segment_line_t{
        height: r(24px);
        width: 100%;
        background: #303030;
    }
    .list_wrap{
        .list_content{
            width: r(575px);
            margin: 0 auto;
        }
        li{
            font-size: 14px;
            border-bottom: r(1px) solid #2d2d2d;
            p{
                line-height: r(88px);
                color: #fff;
                border-bottom: r(1px) solid #2d2d2d;
            }
            span{
                float: right;
                margin-right: r(8px);
                transition: all .4s;
                &::after{
                    content: "";
                    clear: both;
                    display: block;
                }
            }
            .sec_menu_details{
                text-align: center;
                font-size: 14px;
                color: #fff;
                width: r(430px);
                margin: 0 auto;
                display: none;
                overflow: hidden;
                &>li{
                    line-height: r(88px);
                    &:last-of-type{
                        border-bottom: none;
                    }
                }
            }
        }
        
    }
//  .list_wrap{
//      width: r(575px);
//      margin: 0 auto;
//      padding-top: r(49px);
//      .list_content{
//          li{
//              border-bottom: r(1px) solid #2d2d2d;
//              padding-bottom: r(18px);
//              padding-top: r(30px);
//              height: r(88px);
//              overflow: hidden;
//              .sec_menu_details{
//                  display: none;
//                  border-top: r(1px) solid #2d2d2d;
//                  width: r(430px);
//                  margin: r(20px) auto 0 auto;
//                  text-align: center;
//                  font-size: 14px;
//                  color: #fff;
//                  height: 0;
//                  overflow: hidden;
//                  li{
//                      line-height: r(34px);
//                      &:first-of-type{
//                          padding-top: r(20px);
//                      }
//                  }
//              }
//              p{
//                  font-size: 14px;
//                  color: #fff;
//                  span{
//                      float: right;
//                      margin-right: r(8px);
//                      &::after{
//                          content: "";
//                          clear: both;
//                          display: block;
//                      }
//                  }
//              }
//              &:first-of-type{
//                  margin-top: 0;
//              }
//              &:last-of-type{
//                  border-bottom: none;
//              }
//          }
//      }
//  }
}
.sec_menu_open{
    transform: rotate(90deg);
}
.login_dis{
    transform: translateY(0);
}
.login_dis_off{
    opacity: 0;
    transform: translateY(-100%);
}